<template>
	<view class="team-setting">
		<view class="team-time bg-all">
			<u-row gutter="40">
				<u-col :span="4">
					<u-input v-model="startData" type="select" placeholder="开始时间" @click="startClick"/>
				</u-col>
				<u-col :span="4">
					<u-input v-model="endData" type="select" placeholder="结束时间" @click="endClick"/>
				</u-col>
				<u-col :span="4" class="search">
					<u-button class="btn" size="mini" type="warning" @click="search">搜索</u-button>
				</u-col>
			</u-row>
		</view>
		<view class="team-info bg-all">
			<u-row class="u-row">
				<u-col class="u-col" v-for="item in teamInfoList" :key="item.id" :span="6">
					<view class="all-info">
						<view class="teamtype">
							{{item.name}}
						</view>
						<view class="teamval">
							{{item.value}}
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<view>
			<agent-common></agent-common>
		</view>
		<view class="suggest-wrap bg-all">
			<view class="nav-warp">
				<view class="nav-footer" v-for="(item,index) in navList" :key="index" @click="changeSuggest(index)"
					:class="current == index ? 'active' : ''">
					<view>{{item.name}}</view>
					<image v-if="current == index" src="/static/index/tab-label.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="nav-content_tip bg-all">
			<u-row class="nav_row" v-for="(item,index) in contentList" :key="index">
				<u-col class="nav_col" :span="2">
					<image class="nav_img" :src="item.url" mode=""></image>
				</u-col>
				<u-col :span="7">
					<text class="nav-wrap_name">{{item.name}}</text>
					<view class="nav-desc_vip">
						<image v-if="item.viptype == 1" class="wrap_img" src="/static/mine/team/vip1.png" mode=""></image>
						<image v-if="item.viptype == 2" class="wrap_img" src="/static/mine/team/vip2.png" mode=""></image>
						<image v-if="item.viptype == 3" class="wrap_img" src="/static/mine/team/vip3.png" mode=""></image>
						<image v-if="item.viptype == 4" class="wrap_img" src="/static/mine/team/vip4.png" mode=""></image>
						<image v-if="item.viptype == 5" class="wrap_img" src="/static/mine/team/vip5.png" mode=""></image>
						<image v-if="item.viptype == 6" class="wrap_img" src="/static/mine/team/vip6.png" mode=""></image>
						<text>{{item.vip}}</text>
					</view>
				</u-col>
				<u-col class="nav-col_val" :span="3">
					<text class="nav-col_fill">余额</text>
					<view class="vip_level">
						{{item.value}}
					</view>
				</u-col>
			</u-row>
		</view>
		<u-calendar v-model="showStartData" monthArrowColor="#F59328" :closeable="false" mode="date" 
			@change="changeStart">
		</u-calendar>
		<u-calendar v-model="showEndData" monthArrowColor="#F59328" :closeable="false" mode="date"
			@change="changeEnd">
		</u-calendar>
	</view>
</template>
<script>
import AgentCommon from '../../../components/agent-common/agent-common.vue'
export default {
	data() {
		return {
			current: 0,
			startData: '', // 开始时间
			endData: '', // 结束时间
			showStartData: false,
			showEndData: false,
			teamInfoList: [
				{name: '团队余额', value: '1221.00', id: 1},
				{name: '代理返佣', value: '12', id: 2},
				{name: '团队充值', value: '3', id: 3},
				{name: '团队提现', value: '2421', id: 4},
				{name: '团队人数', value: '12', id: 5},
				{name: '新增人数', value: '44', id: 6},
			],
			navList: [
				{name: '直推(3)'},
				{name: '二级(5)'},
				{name: '三级(8)'},
				{name: '四级(10)'},
			],
			contentList: [
				{name: '2123123412', url: '/static/mine/tx.png', viptype: 2, vip: '黄金会员', value: '8303.00'},
				{name: '21212', url: '/static/mine/tx.png', viptype: 1, vip: '白银会员', value: '8303.00'},
				{name: '1251234', url: '/static/mine/tx.png', viptype: 6, vip: '至尊会员', value: '8303.00'},
			]
		};
	},
	components: {
		AgentCommon
	},
	methods: {
		startClick(){
			this.showStartData = true
		},
		endClick(){
			this.showEndData = true
		},
		changeStart(e){
			this.startData = e.result
		},
		changeEnd(e){
			this.endData = e.result
		},
		// 搜索
		search(){
			if(this.startData > this.endData){
				
			} else {
				
			}
		},
		changeSuggest(index){
			this.current = index
		}
	}
}
</script>
<style lang="scss" scoped>
.team-setting{
	.team-time{
		margin-bottom: 20rpx;
		padding: 16rpx 20rpx;
		height: 96rpx;
		border-top: 2rpx solid #F1F1F1;
		/deep/ .u-input__input{
			color: #F59328;
		}
		.search{
			text-align: center !important;
			.btn{
				width: 100rpx;
				border-radius: 40rpx;
			}
		}
	}
	.team-info{
		.u-row{
			padding: 0rpx 20rpx;
			.u-col{
				border-bottom: 1px solid #EEEEEE;
				.all-info{
					padding: 20rpx 0rpx;
				}
				.teamtype{
					font-size: 26rpx;
				}
				.teamval{
					color: #FF464C;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
			.u-col:nth-child(odd){
				border-right: 1px solid #EEEEEE;
			}
		}
		
	}
	.suggest-wrap{
		margin-top: 20rpx;
		padding: 20rpx 40rpx;
		.nav-warp{
			display: flex;
			font-size: 30rpx;
			flex-direction: row;
			justify-content: space-between;
			border-bottom: 1px solid #F4F6F8;
		}
		.nav-footer{
			height: 60rpx;
			text-align: center;
			line-height: 0rpx;
		}
		.active{
			font-weight: bold;
		}
		image{
			width: 60rpx;
			height: 6rpx;
		}
	}
	.nav-content_tip{
		padding: 20rpx 40rpx;
		.nav_row{
			height: 140rpx;
			border-bottom: 1px solid #F4F6F8;
			.wrap_img{
				width: 40rpx;
				height: 40rpx;
			}
			.nav-wrap_name{
				font-weight: bold;
			}
			.nav-desc_vip{
				display: flex;
				align-items: center;
			}
			
		}
		.nav_col{
			.nav_img{
				margin-top: 20rpx;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
		}
		.nav-col_val{
			text-align: right !important;
			.nav-col_fill{
				color: #A8A8A8;
			}
			.vip_level{
				color: #FF464C;
				font-weight: bold;
				font-size: 32rpx;
			}
		}
	}
}
</style>
